<template>
  <div class="bg">
    <div class="content">
      <div class="title-box">
        <div class="top">
          <div class="select">{{ time }}</div>
          <div class="select">{{ userInfo.direction }}</div>
          <vue-icon iconClass="lingdang" color="white" size="1.5vw" class="lingdang"></vue-icon>
        </div>
        <div class="logo">
          <img src="../../assets/img/public/logo.jpg" />
        </div>
        <span>Deep footprints, make a picture of success.</span>
      </div>
      <div class="flex-box">
        <left-info-bar :userInfo="userInfo" :curWork="curWork"></left-info-bar>
        <file-upload :userInfo="userInfo" :curWork="curWork"></file-upload>
        <history-list :userInfo="userInfo" :curWork="curWork"></history-list>
      </div>
    </div>
  </div>
</template>

<script>
import LeftInfoBar from './LeftInfoBar.vue';
import FileUpload from './FileUpload.vue';
import HistoryList from './HistoryList.vue';
import {getCurrentWeek} from '../../utils/date'
export default {
  created() {
    this.time=getCurrentWeek()
    const id = localStorage.getItem('localID');
    // const id =2;
    this.getUserMessage(id)
  },
  data() {
    return {
      time: '',
      //用户方向
     userInfo:{},
     workList:[],
    curWork:{
        name:'-',
        message:'',
        stop:''
        }
    };
  },
  name: 'Submit',
  components: {
    LeftInfoBar,
    FileUpload,
    HistoryList,
  },
watch:{
      async userInfo(oldValue,newValue){
        const {direction} = this.userInfo
        console.log(this.userInfo)
      let res= await this.$api.homeApi.getWorkRecent({direction})
        this.curWork=res.data
      }
},
 methods:{
// 获取用户的所有信息
   async getUserMessage(userId){
    const message = this.$store.state.moudlesUserInfo.info;
     if (message) {
        this.userInfo=message
    } else {
      const id = userId
      // 请求ID
    let res = await this.$api.homeApi.passID(id)
    if(res.status==300){
        this.$message({message: '权限不足，请先登录',type: 'warning' })
                return
        }
        if(res.data){
                res=res.data
                this.userInfo= res
                this.$store.commit('moudlesUserInfo/newInfo', res);
                let worklist= await  this.$api.homeApi.getTask()
                worklist=worklist.data
                this.workList=worklist?.filter(item=>{
                    return res.direction==item.direction
                })
                this.workList.splice(0,0)
        }else{
                this.$message({message: '获取用户信息失败',type: 'warning' });
        }
    }
    },
}
};
</script>

<style lang="less" scoped>
.bg {
  position: relative;
  .body-size();
  background-image: url('../../assets/img/public/bg.jpg');
  .bg-maker();
}
.title-bar {
  margin: 0 auto;
  width: 500px;
  height: 50px;
  text-align: center;
}
.content {
  width: 95vw;
  .to-center-ab();
  height: 96vh;
}
.title-box {
  width: 100%;
  height: 8vh;
  // background-color: red;
  text-align: center;
  color: #022757;
  font-size: 20px;
  line-height: 5vh;
  clear: both;
  position: relative;
  .top {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    top: 1vh;
    right: 0px;
    .select {
      width: 7.5vw;
      height: 3.8vh;
      margin: 0.5vw 3vh 0.5vw 1vh;
      float: right;
      line-height: 3.5vh;
      font-size: 2vh;
      border-radius: 0.5vw;
      background-color: rgba(216, 239, 249, 0.8);
      box-shadow: 0px 0.1vw 0.3vw rgba(0, 0, 0, 0.8);
    }
    .lingdang {
      position: relative;
      top: 0.7vw;
    }
  }
  .logo {
    position: absolute;
    top: -10px;
    transform: scale(0.8);
  }
}
.flex-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
